<template>
	<view>
		<view>
			<u-tabs-swiper ref="uTabs" :list="list" :current="current" @change="tabsChange" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
		</view>
		<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish" style="height: 100vh;">
			<swiper-item class="swiper-item" v-for="(item, index) in list" :key="index">
				<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
					<u-empty text="暂时没有数据哦~" mode="message" :show="commentlist.length==0" :color="color"></u-empty>
					<view class="item" v-for="comment in commentlist" :key="comment._id">
						<view class="head">
							<view>
								<u-avatar :src="comment.userinfo.avatar"></u-avatar>
							</view>
							<view>
								<view class="nickname">{{comment.userinfo.nickname}}</view>
								<view class="date">{{comment.createtime}} 评价</view>
							</view>
						</view>
						<view class="comment">{{comment.comment}}</view>
						<view class="intro"><span style="color: #C0C0C0;font-size: 13px;">综合评分:{{comment.averagescore}}分</span></view>
						<view class="dish">
							<view class="dishname"><span v-for="(name,idx) in comment.dishlist" :key="'dish'+idx">{{name.name}};</span><span>共{{comment.dishlist.length}}件菜品</span></view>
						</view>
						<view v-if="swiperCurrent==1" style="color: rgb(247 ,48 ,48);">
							商家回复:{{comment.response}}
						</view>
					</view>
					<u-divider color="#9ea4aa;" half-width="200" border-color="#9ea4aa" bg-color="transparent" v-show="commentlist.length!=0">没有更多了</u-divider>
				</scroll-view>

			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				color: '#000000',
				oldlist: [],
				commentlist: [],
				account: '',
				list: [{
					name: '我的评价'
				}, {
					name: '回复我的'
				}],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
			};
		},
		created() {
			this.account = JSON.parse(uni.getStorageSync('currentUser')).account
			this.getcomment()
		},
		methods: {
			getcomment() {
				this.$u.post('/comment/getMyComment', {
					account: this.account
				}).then(res => {
					console.log(res);
					this.commentlist = res.data.data
					this.oldlist = this.commentlist.slice()
				})
			},
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
				if (index == 1) {
					this.commentlist = this.commentlist.filter(i => i.response != '')
				} else {
					this.commentlist = this.oldlist
				}
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				if (this.swiperCurrent == 1) {
					this.commentlist = this.commentlist.filter(i => i.response != '')
				} else {
					this.commentlist = this.oldlist
				}
				this.current = current;
			},
			// scroll-view到底部加载更多
			onreachBottom() {

			}
		}
	};
</script>

<style lang="scss">
	page {
		background: #f1f1f1;
	}

	.swiper-item {
		height: 100vh;
	}

	.container {
		padding: 20rpx;
	}

	.item {
		padding: 20rpx;
		background: #FFFFFF;

		&:first-child {
			margin-top: 20rpx;
		}

		margin-bottom: 20rpx;
	}

	.head {
		display: flex;
		height: 130rpx;
		align-items: center;
		// view:first-child {
		// 	width: 120rpx;
		// 	height: 120rpx;
		// }
	}

	.nickname {
		font-size: 14px;
	}

	.date {
		font-size: 12px;
		color: #C0C0C0;

	}

	.dishname {
		color: #686868;
		font-size: 13px;
	}
</style>
